<template>
    <div class="card-page">
        <div class="card-box">
            <div class="back_btn" @click="back">&lt;&nbsp;&nbsp;返回</div>
            <CardDetail :cardDetail="cardDetail" v-if="cardDetail.name" :type="'user'"></CardDetail>
            <!-- <div class="deleta-btn">
                <div>删除</div>
            </div> -->
        </div>
        <div class="img-box">
            <div>
                <img :src="codeImg" alt="">
                <p>打开微信扫一扫</p>
                <p>立即预览用户名片信息</p>
            </div>
        </div>
    </div>
</template>
<script>
import { getCustomerInfoApi } from '@/api/api.js'
import CardDetail from "@/components/card-detail.vue"
export default {
    components: { CardDetail },
    data () {
        return {
            codeImg: '',
            cardDetail: {
                logo: '',
                name: '',
                phone: '',
                personalWx: '',
                companyName: '',
                position: '',
                seeNum: '',
                createTime: '',
                briefIntroduction: '',
                photo: ''
            },
        }
    },
    created() {
        this.getCardDetail();
    },
    mounted() {
        
    },
    methods: {
        getCardDetail () {
            let params = {
                cardId: this.$route.query.id
            }
            getCustomerInfoApi(params).then(res => {
                let cardDetail = res.data
                if (cardDetail.photo) {
                    cardDetail.photo = cardDetail.photo.split(',')
                }
                this.cardDetail = cardDetail
                this.codeImg = res.data.wxTwoCode
            })
        },
        back(){
            window.history.back();
        }
    },
}
</script>
<style lang="scss">
.card-page{
    display: flex;
    .card-box{
        flex: 1;
        min-width: 900px;
        position: relative;
        .deleta-btn{
            padding: 20px 0;
            div{
                height: 40px;
                line-height: 40px;
                text-align: center;
                background:rgba(255,92,108,1);
                border-radius:4px;
                color:#fff;
                cursor: pointer;
                width: 85px;
            }
        }
        .back_btn{
            position: absolute;
            border-radius: 4px;
            // background: #B9EBEA;
            background: #51CDCB;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
            top: 30px;
            right: 60px;
        }
    }
    .img-box{
        margin-left: 128px;
        width: 466px;
        min-width: 466px;
        height: 950px;
        background: url(../../assets/images/iphone.png) no-repeat 0 0;
        background-size: 100% 100%;
        padding: 198px 40px 118px 40px;
        box-sizing: border-box;
        div{
            width: 100%;
            height: 100%;
            position: relative;
            background: #fff;
            padding-top: 2px;
            img{
                width: 300px;
                height: 300px;
                margin-left: 43px;
                margin-bottom: 40px;
            }
            p{
                height:41px;
                font-size:16px;
                color:rgba(38,50,56,1);
                line-height:24px;
                text-align: center;
                margin: 0;
            }
        }
    }
}
</style>
